[译]指向跨域的链接是不安全的

最近在回顾前端知识, 整理到安全部分, 刚好看到这篇文章, 觉得不错, 翻译一下...

当你使用 target="_blank" 链接到一个其他站点的页面时，你的站点将会暴露出性能和安全上的问题：

链接到的页面可能和你的页面运行在同一个进程上。如果该页面正在运行大量的JavaScript，你的页面的性能可能会受到影响；
链接到的页面可以使用 window.opener 属性访问你的页面的 window 对象。这可能会导致你的页面被重定向到一个恶意的URL；

在设置了 target="blank" 的链接中添加 rel="noopener" 或是 rel="noreferrer" 可以避免这些问题。

在Chromium的88版本中，带有 target="blank" 的锚点默认会自动获得 noopener。主动设置 rel="noopener" 有助于保护传统浏览器（包括Edge legacy和Internet Explorer）的用户。

Lighthouse 如何对跨域链接进行评估

Lighthouse 是 Chrome 开发者工具中自带的功能

Lighthouse 将跨域的不安全链接标记出来：

Lighthouse 通过以下过程，将不安全的链接识别出来：

收集所有包含 target="blank" 属性但不包含 rel="noopener" 或是 rel="noreferrer" 属性的 <a> 标签；
过滤所有相同域名的链接；

如果你在大型网站开发的话，因为 Lighthouse 过滤掉了相同域名的链接，所以你需要注意一种特殊情况：如果一个页面包含一个设置了target="blank" 而没有设置 rel="noopener" 的链接，并且指向你的网站的另一个页面，Lighthouse 仍然会报告性能影响。但你将不会在 Lighthouse 的结果中看到这些链接。

在Lighthouse的最佳实践分数中，每一个最佳实践评估都具有相同的权重。你可以通过 The Best Practices score 了解更多。

如何提升你的网站的性能和防止安全漏洞

添加 rel="noopener" 或是 rel="noreferrer" 到每一个被 Lighthouse 报告标识出来的链接。一般来说，当你使用了 target="_blank"，请始终添加 rel="noopener" 或 rel="noreferrer":

html

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>

rel="noopener" 禁止新页面访问 window.opener 属性，并且确保它运行在单独的进程中；
rel="noreferrer" 具有相同的作用，但也会阻止 Referer 头发送到新的页面中。具体查看 Link type "noreferrer"。

更多信息，请查看共享跨域资源。

原文链接

Links to cross-origin destinations are unsafe

Lighthouse 如何对跨域链接进行评估 ​

如何提升你的网站的性能和防止安全漏洞 ​

相关资料 ​

原文链接 ​

Lighthouse 如何对跨域链接进行评估

如何提升你的网站的性能和防止安全漏洞

相关资料

原文链接